<script>
var uid = "$uid";
</script>
#raw
<script> 
function change_preview(size,image,selection){
	if (!selection.width || !selection.height)	return;
	var scaleX = size / selection.width;
    var scaleY = size / selection.height; 
    $("#preview"+size+" img").css({
        width: Math.round(scaleX * 300),
        height: Math.round(scaleY * 300),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    }); 
} 
function preview(img,selection){
	change_preview(128,img,selection);
	change_preview(50,img,selection);
	change_preview(30,img,selection);
	$('#x1').val(selection.x1);
	$('#y1').val(selection.y1);
	$('#x2').val(selection.x2);
	$('#y2').val(selection.y2); 
}
$(function () { 
	$('#photo').imgAreaSelect({
		x1: 100, y1: 100, x2: 196, y2: 196, 
		handles: true ,
		aspectRatio: '1:1',
		onSelectChange:preview,
	});
	
	$.post("/user_profile",{'uid':uid},function(data){  
		$("#userInfo").prepend(data);
    });
});

</script>
#end raw
<div id="tContent01" class="tContent01">

<div id="main" class="main">
<div class="topBar001"></div>
<div class="nC1">
  
  
<div style="margin-left: 40px; margin-top: 10px; margin-bottom: 10px;">

<div class="mb8">
<form action="/u/upload" method="post" enctype="multipart/form-data">
	<div class="l mr8 b" style="color:red; font-size: 14px;"><span>上传您的照片:</span></div>
	<div class="l">
		<input type="file" name="myFile" style="width: 85px;"/>
		<input type="submit" value="上传"/>
	</div>
	<div class="c"></div>
</form>  
</div> 

<div id="preview" class="mb8" >
	<div class="round l ml8" style="background-color: red; width: 300px; height: 300px;">
		<img id="photo" style="width: 300px; height: 300px;" src="$avatar_url"></img>
	</div>
	<div style="margin-left: 20px;" class="l">
		<div id="preview128" class="round mt8" style="background-color: yellow; width: 128px; height: 128px; overflow: hidden;">
			<img src="$avatar_url" style="width: 349px; height: 349px; margin-left: -179px; margin-top: -137px; "/>
		</div>
		<div id="preview50" class="round mt8" style="background-color: yellow; width: 50px; height: 50px; overflow: hidden;">
		   <img src="$avatar_url" style="width: 349px; height: 349px; margin-left: -179px; margin-top: -137px; "/>
		</div>
		<div id="preview30" class="round mt8" style="background-color: yellow; width: 30px; height: 30px; overflow: hidden;">
		   <img src="$avatar_url" style="width: 349px; height: 349px; margin-left: -179px; margin-top: -137px; "/>
		</div>
		<div class="c"></div>
	</div>
</div>

<div class="mt8"> 
	<form action="/u/avatar_crop" method="post">
		<div class="c"></div>
		<input id="x1" type="hidden" name="x1" value="100"></input>
		<input id="y1" type="hidden" name="y1" value="100"></input>
		<input id="x2" type="hidden" name="x2" value="196"></input>
		<input id="y2" type="hidden" name="y2" value="196"></input> 
		<input style="width: 100px; height: 28px; font-size: 14px; font-weight: bold; margin-left: 8px;" type="submit" value="提交"/>
	</form>
</div> 
</div>  
</div> <!-- end nC1 -->  
</div>

<div class="side">
	<div class="tTopBarBg01"></div>
	<div id="userInfo"> </div> 
</div><!-- end side --> 


<div class="clear"></div>
</div><!-- end content -->